/**
 * 学习目标：Redux 基础
 *   创建仓库实例：
 *      const store = createStore(函数)
 *
 *   仓库实例三个核心API：
 *      获取：  getState: ƒ getState()
 *      修改：  dispatch: ƒ dispatch(action)
 *      订阅：  subscribe: ƒ subscribe(listener)
 */
import { createStore } from 'redux'

// 创建仓库实例
const store = createStore(function (state = { count: 1 }, action) {
  // console.log('通过dispatch传递过来的action', action)
  switch (action.type) {
    case 'add':
      return { ...state, count: state.count + action.payload }
    default:
      return state
  }
})

// 仓库实例三个核心API：
//    获取：  getState: ƒ getState()
//    修改：  dispatch: ƒ dispatch(action)
//    订阅：  subscribe: ƒ subscribe(listener)
// console.log(store)

// 获取仓库数据
console.log(store.getState())
// 返回一个用于取消订阅的函数
const unSubscribeFn = store.subscribe(() => {
  // console.log('仓库数据变了', store.getState())
  // 🔔 Redux 仓库的数据可以应用在任何项目中(React、Vue、小程序、原生JS都可以)
  document.write(`<h1>${JSON.stringify(store.getState())}</h1>`)
})

// 💥 改变仓库内部状态的唯一方法是 dispatch 一个 action 。
store.dispatch({ type: 'add', payload: 1 })
store.dispatch({ type: 'add', payload: 2 })

// 取消订阅函数调用后，后面的更新就不会被监听到了
unSubscribeFn()

store.dispatch({ type: 'add', payload: 3 })
store.dispatch({ type: 'add', payload: 4 })

// store.dispatch('add', payload)
